<template>
  <!-- 子组件模板 -->
  <view class="send-shop-view">

   <view v-if="shopInfo"> 
	<view class="shop-name">{{shopInfo.name}}</view>
	<view class="image-container">
		  <image :src="shopInfo.photos[0].url" mode="aspectFill" ></image>
	</view>
	 <view class="shop-description"></view> 
     </view>
	
  <view v-else-if="isLoading">
      商品信息加载中...
    </view> 
	
  <view v-else>
      未找到该商品信息
    </view>
	 <view class="shop-price"></view>
  </view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	name:"sendshopView",
  // 接收父组件传递的 sendshopId 作为 prop
  props: {
    sendshopId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      shopInfo: null, // 存储商品信息
      isLoading: true ,// 加载状态
	
    };
  },
  created() {

    // 在组件创建时调用获取商品信息的方法
    this.fetchshopInfo();
  },
  methods: {
    async fetchshopInfo() {
      try {
        const res = await db.collection('sendshop').where({
          sendshopId: this.sendshopId
        }).get();
		
	
        if (res.data.length > 0) {
          // 取查询结果的第一条数据
          this.shopInfo = res.data[0];
        } else {
          // 未查询到商品信息
          this.shopInfo = null;
        }
      } catch (error) {
        console.error('获取商品信息失败:', error);
        this.shopInfo = null;
      } finally {
        // 无论请求成功还是失败，都将加载状态置为 false
        this.isLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.send-shop-view {
  display: flex;
  width: 400rpx;
  height: 500rpx;
  align-items: center;
  gap: 10rpx;
}

.shop-name {
	background-color: white;
  text-align: center;
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  border-top-right-radius: 10rpx;
  border-top-left-radius: 10rpx;
}
.image-container {
  position: relative;
  display: flex; 
  width: 400rpx
  
}

.shop-description {
	position: absolute;
	width: 150rpx;
  border-radius: 5rpx;
  background-color: rgba(85, 170, 255, 0.5);
  bottom: 5rpx;
  left: 5rpx;
  font-size: 28rpx;
  color: white;
}
.shop-price{
	  position: absolute;
	  right: 10px;
	  bottom: 10px;
	  background-color: rgba(0, 0, 0, 0.5);
	  color: white;
	  padding: 10px;
	  border-radius: 5px;
}
</style>
</style>